<html>
<head>
    <script src="../../lib/angularjs/angular1.6.3.min.js"></script>
    <script src="../../lib/angularjs/angular-ui-route/angular-ui-routerv1.0.0-alpha.4.js"></script>
    <script src="../../lib/angularjs/angular-ui-route/ui-router-visualizer@1.1.3.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body ng-app="hello" ng-class="{'debug-sref': debug.uisref, 'debug-view': debug.uiview}">
<div class="nav">
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>
    <a ui-sref="people" ui-sref-active="active">People</a>
</div>
<ui-view></ui-view>
</body>
<script>
    /**   APP  **/
    var myApp = angular.module('hello', ['ui.router']);
    /**   PeopleService  **/
    angular.module('hello').service('PeopleService', function($http) {
        var service = {
            getAllPeople: function() {
                return $http.get('people.json', { cache: true }).then(function(resp) {
                    return resp.data;
                });
            },
            getPerson: function(id) {
                function personMatchesParam(person) {
                    return person.id === id;
                }
                return service.getAllPeople().then(function (people) {
                    return people.find(personMatchesParam)
                });
            }
        }
        return service;
    })
</script>
<script>
    myApp.config(function($stateProvider) {
        // An array of state definitions
        var states = [
            { name: 'hello', url: '/hello', component: 'hello' },
            { name: 'about', url: '/about', component: 'about' },
            {
                name: 'people',
                url: '/people',
                component: 'people',
                resolve: {
                    people: function(PeopleService) {
                        return PeopleService.getAllPeople();
                    }
                }
            },
            {
                name: 'people.person',
                url: '/{personId}',
                component: 'person',
                resolve: {
                    person: function(people, $stateParams) {
                        return people.find(function(person) {
                            return person.id === $stateParams.personId;
                        });
                    }
                }
            }
        ]
        // Loop over the state definitions and register them
        states.forEach(function(state) {
            $stateProvider.state(state);
        });
    });
    myApp.run(function($http) {
//        window['ui-router-visualizer'].visualizer($uiRouter);
        $http.get('people.json', { cache: true });
    });
</script>
<!-- About -->
<script>
    angular.module('hello').component('about', {
        template:  '<h3>Its the UI-Router "Hello Galaxy" app!</h3>'
    })
</script>
<script>
    /**  Hello **/
    angular.module('hello').component('hello', {
        template:  '<h3>{{$ctrl.greeting}} galaxy!</h3>' +
        '<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',
        controller: function() {

        }
    })
</script>
<script>
    /** people **/
    angular.module('hello').component('people', {
        bindings: { people: '<' },
        template: '<div class="flex-h">' +
        '  <div class="people">' +
        '    <h3>Some people:</h3>' +
        '    <ul>' +
        '      <li ng-repeat="person in $ctrl.people">' +
        '        <a ui-sref-active="active" ui-sref="people.person({ personId: person.id })">' +
        '          {{person.name}}' +
        '        </a>' +
        '      </li>' +
        '    </ul>' +
        '  </div>' +
        '  <ui-view></ui-view>' +
        '</div>'
    });
</script>
<script>
    /**   person  **/
    angular.module('hello').component('person', {
        bindings: { person: '<' },
        template: '<h3>A person!</h3>' +
        '<div>Name: {{$ctrl.person.name}}</div>' +
        '<div>Id: {{$ctrl.person.id}}</div>' +
        '<div>Company: {{$ctrl.person.company}}</div>' +
        '<div>Email: {{$ctrl.person.email}}</div>' +
        '<div>Address: {{$ctrl.person.address}}</div>' +
        '<button ui-sref="people">Close</button>'
    });
</script>
</html>